<header id="header" class="p-navigation">

  <style>
    .p-navigation {
      border-bottom: 1px solid var(--color-sidebar-background-border);
    }

    .p-navigation__nav {
      display: flex;
    }

    ul.p-navigation__links {
      display: flex;
      list-style: none;
      margin-left: 0;
      margin-top: auto;
      margin-bottom: auto;
      max-width: 800px;
      width: 100%;
    }

    ul.p-navigation__links li {
      margin: 0 auto;
      text-align: center;
      width: 100%;
    }

    ul.p-navigation__links li a {
      background-color: rgba(0, 0, 0, 0);
      border: none;
      border-radius: 0;
      color: var(--color-sidebar-link-text);
      display: block;
      font-weight: 400;
      line-height: 1.5rem;
      margin: 0;
      overflow: hidden;
      padding: 1rem 0;
      position: relative;
      text-align: left;
      text-overflow: ellipsis;
      transition-duration: .1s;
      transition-property: background-color, color, opacity;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      white-space: nowrap;
      width: 100%;
    }

    ul.p-navigation__links .p-navigation__link,
    ul.p-navigation__links .p-navigation__logo {
      text-align: center;
    }

    ul.p-navigation__links .p-navigation__link:hover,
    ul.p-navigation__links .p-dropdown__link:hover {
      background-color: var(--color-sidebar-item-background--hover);
    }

    ul.p-navigation__links .p-navigation__sub-link {
      background: var(--color-background-primary);
      padding: .5rem 0 .5rem .5rem;
      font-weight: 300;
    }

    ul.p-navigation__links .more-links-dropdown li a {
      border-left: 1px solid var(--color-sidebar-background-border);
      border-right: 1px solid var(--color-sidebar-background-border);
    }

    ul.p-navigation__links .more-links-dropdown li:first-child a {
      border-top: 1px solid var(--color-sidebar-background-border);
    }

    ul.p-navigation__links .more-links-dropdown li:last-child a {
      border-bottom: 1px solid var(--color-sidebar-background-border);
    }

    ul.p-navigation__links .p-navigation__logo {
      padding: 0.5rem;
    }

    ul.p-navigation__links .p-navigation__logo img {
      width: 40px;
    }

    ul.more-links-dropdown {
      display: none;
      overflow-x: visible;
      height: 0;
      z-index: 55;
      padding: 0;
      position: relative;
      list-style: none;
      margin-bottom: 0;
      margin-top: 0;
    }

    ul.p-navigation__links li:first-child {
      width: 130px;
    }

    @media only screen and (min-width: 800px) {
      .nav-more-links::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23111' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: block;
        height: 1rem;
        pointer-events: none;
        position: absolute;
        right: 1rem;
        text-indent: calc(100% + 10rem);
        top: calc(1rem + 0.25rem);
        width: 1rem;
      }

      body[data-theme=dark] .nav-more-links::after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path stroke='white' fill='white' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/></svg>");
      }

      ul.p-navigation__links li:first-child {
        width: 100%;
      }
    }

    @media only screen and (min-width: 1310px) {
      ul.p-navigation__links {
        margin-left: calc(50% - 41em);
      }
    }

  </style>

  <div class="p-navigation__nav" role="menubar">

    <ul class="p-navigation__links" role="menu">

      <li>
        <a class="p-navigation__logo" href="/">
          <img src="{{ pathto('_static/download/containers.small.png', 1) }}" alt="Linux containers logo" border="0" />
        </a>
      </li>

      <li>
        <a href="/" class="p-navigation__link">Home</a>
      </li>

      <li>
        <a href="/distrobuilder/introduction/" class="p-navigation__link">distrobuilder</a>
      </li>


      <li>
        <a href="#" class="p-navigation__link nav-more-links">More resources</a>
        <ul class="more-links-dropdown">
          <li>
            <a href="/distrobuilder/news/" class="p-navigation__sub-link p-dropdown__link">News</a>
          </li>

          <li>
            <a href="/distrobuilder/contribute/" class="p-navigation__sub-link is-selected p-dropdown__link">Contribute</a>
          </li>

          <li>
            <a href="/distrobuilder/downloads/" class="p-navigation__sub-link p-dropdown__link">Downloads</a>
          </li>

          <li>
            <a href="https://discuss.linuxcontainers.org" class="p-navigation__sub-link p-dropdown__link">Forum</a>
          </li>

          <li>
            <a href="https://github.com/lxc/distrobuilder" class="p-navigation__sub-link p-dropdown__link">GitHub</a>
          </li>

        </ul>
      </li>

    </ul>
  </div>
</header>
